<template>
  <view
    class="userItem animate__animated animate__bounceInRight"
  >
    <image :src="userDetail.avatar"></image>
    <view class="info">
      <view class="name">{{ userDetail.nickName }}</view>
      <view class="tags">
        <view class="tag" v-for="(item, index) in userDetail.tags" :key="index"
          ><van-tag :type="tagsType[index]" plain size="medium">{{
            item
          }}</van-tag></view
        >
      </view>
      <view class="introduce">
        <view class="introduceContent">{{ userDetail.introduce }}</view>
      </view>
      <view class="operator">
        <van-button
          block
          size="small"
          color="#05A47D"
          class="btn"
          @click="showUserIntro"
          >联系</van-button
        >
        <van-button
          block
          size="small"
          color="#aaa"
          class="btn"
          @click="skipToUserInfo"
          >详情</van-button
        >
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "UserItem",
  props: {
    userDetail: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      tagsType: ["danger", "warning", "success", "primary"],
    };
  },
  computed: { ...mapState(["userInfo"]) },
  methods: {
    showUserIntro() {
      this.$emit("showUserIntro", this.userDetail);
    },
    handleFocus() {
      if (this.userInfo._openid === this.userDetail._openid) {
        uni.showToast({
          icon: "error",
          title: "不能关注自己",
          duration: 1000,
        });
      } else {
        this.userDetail.focusFlag === 0
          ? this.handleConfirmFocus()
          : this.handleCancelFocus();
      }
    },

    // 关注
    async handleConfirmFocus() {
      const userDetail = this.userDetail,
        focusId = userDetail._openid,
        isFous = true;
      try {
        await this.$store.dispatch("focusUser", { focusId, isFous });
        uni.showToast({
          icon: "success",
          title: "关注成功",
          duration: 1000,
        });
        this.$emit("changeFocusFlag", { userDetail, focus: 1 });
      } catch (err) {
        uni.showToast({
          icon: "error",
          title: "关注失败",
          duration: 1000,
        });
        console.log(err);
      }
    },
    // 取关
    async handleCancelFocus() {
      const userDetail = this.userDetail,
        focusId = userDetail._openid,
        isFous = false;

      try {
        await this.$store.dispatch("focusUser", { focusId, isFous });
        uni.showToast({
          icon: "success",
          title: "取关成功",
          duration: 1000,
        });

        this.$emit("changeFocusFlag", { userDetail, focus: 0 });
      } catch (err) {
        uni.showToast({
          icon: "error",
          title: "取关失败",
          duration: 1000,
        });
        console.log(err);
      }
    },

    skipToUserInfo() {
      uni.navigateTo({
        url: `/pages/UserInfo/UserInfo?userDetail=${encodeURIComponent(
          JSON.stringify(this.userDetail)
        )}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.userItem {
  padding: 10rpx 20rpx;
  margin-bottom: 120rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 600rpx;
  height: 380rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  .name {
    margin-top: 100rpx;
    text-align: center;
  }
  .tags {
    display: flex;
    margin-top: 20rpx;
    justify-content: center;
    .tag {
      margin-right: 10rpx;
    }
  }
  .introduce {
    display: flex;
    justify-content: center;
    margin-top: 30rpx;
    font-size: 30rpx;
    color: grey;
    .introduceContent {
      width: 460rpx;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
    }
  }
  .operator {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    .btn {
      width: 50%;
      border-radius: none;
    }
  }
  image {
    position: absolute;
    left: 50%;
    top: -80rpx;
    transform: translateX(-50%);
    width: 180rpx;
    height: 180rpx;
    border-radius: 50%;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
  }
}
</style>
